<template>
  <div class="cml-module">
    <ul class="cml-module-list drag-ul">
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ lockAspectRatioText }}:</p>
        <span class="cml-module-item-o drag-value">
          <a-switch
            size="small"
            :checked="lockAspectRatio"
            @change="setDragOpt($event, 'lockAspectRatio')"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ resizableText }}:</p>
        <span class="cml-module-item-o drag-value">
          <a-switch
            size="small"
            :checked="resizable"
            @change="setDragOpt($event, 'resizable')"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ draggableText }}:</p>
        <span class="cml-module-item-o drag-value">
          <a-switch
            size="small"
            :checked="draggable"
            @change="setDragOpt($event, 'draggable')"
          />
        </span>
      </li>

      <li class="cml-module-item">
        <p :class="['cml-module-item-t', 'grid']">{{ gridXText }}:</p>
        <span class="cml-module-item-o drag-value">
          <a-input-number
            size="small"
            :precision="0"
            :value="gridX"
            @change="setDragOpt($event, 'gridX')"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p :class="['cml-module-item-t', 'grid']">{{ gridYText }}:</p>
        <span class="cml-module-item-o drag-value">
          <a-input-number
            size="small"
            :value="gridY"
            :precision="0"
            @change="setDragOpt($event, 'gridY')"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ minWText }}:</p>
        <span class="cml-module-item-o drag-value">
          <a-input-number
            size="small"
            :min="10"
            :value="minW"
            :precision="0"
            @change="setDragOpt($event, 'minW')"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ minHText }}:</p>
        <span class="cml-module-item-o drag-value"
          ><a-input-number
            size="small"
            :min="10"
            :value="minH"
            :precision="0"
            @change="setDragOpt($event, 'minH')"
        /></span>
      </li>
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ axisText }}</p>
        <span class="cml-module-item-o drag-value">
          <a-select
            :value="axis"
            :options="axisOption"
            @change="setDragOpt($event, 'axis')"
          >
          </a-select>
        </span>
      </li>
      <li
        v-for="(item, i) in items"
        class="cml-module-item"
        :key="filterId(item)"
      >
        <p class="cml-module-item-t">
          {{ filterId(item) }}
        </p>
        <span
          class="cml-module-item-o drag-value drag-reset"
          @click="reset(item)"
        >
          <i class="platformicon icon_zhongzhi"></i>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { Select, Input, Switch, InputNumber } from 'ant-design-vue'
import CmlModule from '@/assets/js/app/cmlpanel/components/cml-module'
import { partServer } from 'anov-core'

export default {
  components: {
    ASelect: Select,
    AInput: Input,
    ASwitch: Switch,
    AInputNumber: InputNumber,
    CmlModule
  },
  data() {
    return {
      axisOption: [
        {
          label: 'X',
          value: 'x'
        },
        {
          label: 'Y',
          value: 'y'
        },
        {
          label: 'Both',
          value: 'both'
        }
      ]
    }
  },
  computed: {
    ...mapState('page', ['destroyParts']),
    ...mapState('part', [
      'lockAspectRatio',
      'resizable',
      'draggable',
      'grid',
      'minW',
      'minH',
      'axis'
    ]),
    gridX() {
      return this.grid[0]
    },
    gridY() {
      return this.grid[1]
    },
    minWidth() {
      return this.minWH[0]
    },
    minHeight() {
      return this.minWH[1]
    },
    lockAspectRatioText() {
      return this.$t('cmlpanel.lockAspectRatioText')
    },
    resizableText() {
      return this.$t('cmlpanel.resizableText')
    },
    draggableText() {
      return this.$t('cmlpanel.draggableText')
    },
    gridXText() {
      return this.$t('cmlpanel.gridXText')
    },
    gridYText() {
      return this.$t('cmlpanel.gridYText')
    },
    minWText() {
      return this.$t('cmlpanel.minW')
    },
    minHText() {
      return this.$t('cmlpanel.minH')
    },
    axisText() {
      return this.$t('cmlpanel.axisText')
    },
    items() {
      let path = this.$route.path
      let itemArr = this.destroyParts.filter((part) => {
        let arr = Object.keys(part).join('').split('_')
        return arr[0] == path
      })
      return itemArr
    }
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    setDragOpt(v, v2) {
      let key = v2,
        val = v
      if (v2 == 'gridX') {
        key = 'grid'
        val = [v - 0 || 1, this.gridY]
      }
      if (v2 == 'gridY') {
        key = 'grid'
        val = [this.gridX, v - 0 || 1]
      }

      if (key == 'minH' || key == 'minW') {
        val = val - 0 || 10
      }

      partServer.setDragOpt({ key, val })
    },
    reset(item) {
      let id = this.filterId(item)
      app.anovPage.resetPart(id)
    },
    filterId(item) {
      let array = Object.keys(item).join('').split('_')
      return array[1]
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/sys-style/panel-var.scss';
@import '@/assets/css/sys-style/panel-mixin.scss';
.cml-module .drag-ul {
  background-color: transparent;
  .cml-module-item {
    padding-left: 20px;
  }
  .grid {
    transition: all ease 0.2s;
  }
  .grid-disabled {
    color: #4f6161;
  }
}
::v-deep {
  .ant-input-number {
    width: 70px;
    border: 1px solid #141518;
    background-color: #141518;
  }
  .ant-input-number-input {
    width: 70px;
    color: #44cbd7;
    &:focus {
      box-shadow: 0 0 0 1px #44cbd7;
    }
  }
  .ant-input-number-focused {
    box-shadow: none;
  }
  .ant-input-number-disabled .ant-input-number-input {
    color: #4f6161;
  }
  .ant-input-number-handler-wrap {
    display: none;
  }
}
.drag-value {
  margin-right: 15px;
}
.drag-reset {
  cursor: pointer;
  color: #4f6161;
  transition: color 0.5s ease-in-out;
  &:hover {
    color: #24e0f1;
  }
}
</style>
